<template>
  <Modal :model-value="modelValue" title="meta说明" @close="close">
    <el-form disabled v-bind="formConfig">
      <template v-if="metaConfig.icon">
        <el-form-item label="图标">
          <template #label>
            <el-tooltip content="key值: icon">
              <el-space>
                图标
                <icon name="InfoFilled" />
              </el-space>
            </el-tooltip>
          </template>
          <icon-select
            :model-value="metaConfig.icon"
            :type="meta.iconType"
            disabled
          />
        </el-form-item>
        <el-form-item>
          <template #label>
            <el-tooltip
              :content="`key值: iconType，可选值：${ICON_TYPE.EL_ICON} | ${ICON_TYPE.SVG}`"
            >
              <el-space>
                图标类型
                <icon name="InfoFilled" />
              </el-space>
            </el-tooltip>
          </template>
          <el-input :model-value="metaConfig.iconType" />
        </el-form-item>
      </template>
      <el-form-item>
        <template #label>
          <el-tooltip
            content="key值: moduleName，即文件夹名称（包含父级文件夹）"
          >
            <el-space>
              模块名
              <icon name="InfoFilled" />
            </el-space>
          </el-tooltip>
        </template>
        <el-input :model-value="metaConfig.moduleName" />
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-tooltip content="key值: title">
            <el-space>
              标题
              <icon name="InfoFilled" />
            </el-space>
          </el-tooltip>
        </template>
        <el-input :model-value="metaConfig.title" />
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-tooltip
            content="key值: isAffix，设置为true后，在顶部tabs-view不可关闭"
          >
            <el-space>
              是否固定tab
              <icon name="InfoFilled" />
            </el-space>
          </el-tooltip>
        </template>
        <el-switch
          :model-value="metaConfig.isAffix"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-tooltip content="key值: icon，即keep-alive功能">
            <el-space>
              是否缓存
              <icon name="InfoFilled" />
            </el-space>
          </el-tooltip>
        </template>
        <el-switch
          :model-value="metaConfig.isKeepAlive"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <template v-if="metaConfig.type === SPECIAL_ROUTE_TYPE.IFRAME">
        <el-form-item>
          <template #label>
            <el-tooltip :content="`key值：${SPECIAL_ROUTE_TYPE.IFRAME}`">
              <el-space>
                是否iframe
                <icon name="InfoFilled" />
              </el-space>
            </el-tooltip>
          </template>
          <el-switch
            :model-value="metaConfig.type === SPECIAL_ROUTE_TYPE.IFRAME"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="内嵌地址">
          <el-input :model-value="meta.url" />
        </el-form-item>
      </template>
      <template v-if="metaConfig.type === SPECIAL_ROUTE_TYPE.LINK">
        <el-form-item>
          <template #label>
            <el-tooltip :content="`key值：${SPECIAL_ROUTE_TYPE.LINK}`">
              <el-space>
                是否外链
                <icon name="InfoFilled" />
              </el-space>
            </el-tooltip>
          </template>
          <el-switch
            :model-value="metaConfig.type === SPECIAL_ROUTE_TYPE.LINK"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="外链地址">
          <el-input :model-value="meta.url" />
        </el-form-item>
      </template>
      <el-form-item v-if="metaConfig.fullPage">
        <template #label>
          <el-tooltip content="key值：fullPage">
            <el-space>
              是否全屏
              <icon name="InfoFilled" />
            </el-space>
          </el-tooltip>
        </template>
        <el-switch
          :model-value="metaConfig.fullPage"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
    </el-form>
  </Modal>
</template>

<script setup>
import { ModalEmits } from '@/components/modal/emit'
import { ICON_TYPE } from '@/const'
import { SPECIAL_ROUTE_TYPE } from '@/const/router'
import useForm from '@/hooks/useForm'

const modelValue = defineModel({ type: Boolean, default: false })
const props = defineProps({ meta: Object })
const emit = defineEmits(ModalEmits)

const { formConfig } = useForm({}, { labelWidth: 120, labelPosition: 'right' })

const metaConfig = computed(() => {
  const meta = props.meta

  return {
    icon: meta.icon,
    iconType: meta.iconType || ICON_TYPE.EL_ICON,
    moduleName: meta.moduleName || '暂无',
    title: meta.title,
    isAffix: meta.isAffix || false,
    isKeepAlive: meta.isKeepAlive || false,
    type: meta.type,
    link: meta?.link === SPECIAL_ROUTE_TYPE.LINK,
    iframe: meta?.iframe === SPECIAL_ROUTE_TYPE.LINK.IFRAME,
    fullPage: meta.fullPage || false,
  }
})

function close() {
  modelValue.value = false
  emit('close')
}
</script>

<style scoped>
:deep(.el-form-item__label) {
  margin-right: 20px;
}
</style>
